<template>
<el-form :model="Professional_and_course_building_outcomes" label-position="top" size="large" :rules="rules" ref="Professional_and_course_building_outcomes_form">
    <el-tabs v-model="ActiveTab">

        <el-tab-pane label="课程团队相关工作" name="课程团队相关工作">
            <el-row justify="center" style="margin-top: 50px">
                <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                    <el-row justify="space-evenly">
                        <el-col :span="24" style="margin-bottom: 30px">
                            <el-row>
                                <el-form-item label="年份" prop="m_year_part1">
                                    <el-input-number :min="0" v-model="Professional_and_course_building_outcomes.m_year_part1"></el-input-number>
                                </el-form-item>
                            </el-row>
                        </el-col>
                        <el-col :span="24">
                            <el-row>
                                <el-col :xs="24" :md="12">
                                    <el-col :span="20">
                                        <el-form-item label="上半年作为课程负责人/课程团队成员，所承担的课程名称" prop="m_coursemember_first">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_coursemember_first"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="主要承担任务" prop="m_coursetask1">
                                            <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_coursetask1"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-col>
                                <el-col :xs="24" :md="12">
                                    <el-col :span="20">
                                        <el-form-item label="下半年作为课程负责人/课程团队成员，所承担的课程名称" prop="m_coursemember_second">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_coursemember_second"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="主要承担任务" prop="m_coursetask2">
                                            <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_coursetask2"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-tab-pane>


        <el-tab-pane label="人才培养方案修订" name="人才培养方案修订">
            <el-row justify="center" style="margin-top: 50px">
                <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                    <el-row justify="space-evenly">
                        <el-col :span="24" style="margin-bottom: 30px">
                            <el-row>
                                <el-form-item label="年份" prop="m_year_part2">
                                    <el-input-number :min="0" v-model="Professional_and_course_building_outcomes.m_year_part2"></el-input-number>
                                </el-form-item>
                            </el-row>
                        </el-col>
                        <el-col :span="24">
                            <el-row>
                                <el-col :xs="24" :md="12">
                                    <el-col :span="20">
                                        <el-form-item label="上半年专业" prop="m_major_first">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_major_first"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="上半年层次" prop="m_level_first">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_level_first"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="主要承担任务" prop="m_traintask1">
                                            <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_traintask1"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-col>
                                <el-col :xs="24" :md="12">
                                    <el-col :span="20">
                                        <el-form-item label="下半年专业" prop="m_major_second">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_major_second"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="下半年层次" prop="m_level_second">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_level_second"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="主要承担任务" prop="m_traintask2">
                                            <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_traintask2"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

        </el-tab-pane>


        <el-tab-pane label="课程标准编写" name="课程标准编写">
            <el-row justify="center" style="margin-top: 50px">
                <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                    <el-row justify="space-evenly">
                        <el-col :span="24" style="margin-bottom: 30px">
                            <el-row>
                                <el-form-item label="年份" prop="m_year_part3">
                                    <el-input-number :min="0" v-model="Professional_and_course_building_outcomes.m_year_part3"></el-input-number>
                                </el-form-item>
                            </el-row>
                        </el-col>
                        <el-col :span="24">
                            <el-row>
                                <el-col :xs="24" :md="12">
                                    <el-col :span="20">
                                        <el-form-item label="上半年课程标准编写" prop="m_coursewrite_first">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_coursewrite_first"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="主要承担任务" prop="m_write_task1">
                                            <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_write_task1"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-col>
                                <el-col :xs="24" :md="12">
                                    <el-col :span="20">
                                        <el-form-item label="下半年课程标准编写" prop="m_coursewrite_second">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_coursewrite_second"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="主要承担任务" prop="m_write_task2">
                                            <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_write_task2"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-tab-pane>


        <el-tab-pane label="参与实训室管理" name="参与实训室管理">
            <el-row justify="center" style="margin-top: 50px">
                <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                    <el-row justify="space-evenly">
                        <el-col :span="24" style="margin-bottom: 30px">
                            <el-row>
                                <el-form-item label="年份" prop="m_year_part4">
                                    <el-input-number :min="0" v-model="Professional_and_course_building_outcomes.m_year_part4"></el-input-number>
                                </el-form-item>
                            </el-row>
                        </el-col>
                        <el-col :span="24">
                            <el-row>
                                <el-col :xs="24" :md="12">
                                    <el-col :span="20">
                                        <el-form-item label="上半年管理教室" prop="m_class_first">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_class_first"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="主要承担任务" prop="m_classtask1">
                                            <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_classtask1"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-col>
                                <el-col :xs="24" :md="12">
                                    <el-col :span="20">
                                        <el-form-item label="下半年管理教室" prop="m_class_second">
                                            <el-input v-model="Professional_and_course_building_outcomes.m_class_second"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-form-item label="主要承担任务" prop="m_classtask2">
                                            <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_classtask2"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-tab-pane>


        <el-tab-pane label="其他" name="其他">
            <el-row justify="center" style="margin-top: 50px">
                <el-col :span="18">
                    <el-input type="textarea" :rows="4" v-model="Professional_and_course_building_outcomes.m_others"></el-input>
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
    <el-affix position="bottom" :offset="0">
        <el-button style="position: absolute;bottom: 50px;right: 10%" @click="submit" type="success" :loading="isLoading">提交 “专业和课程建设成果”</el-button>
    </el-affix>
</el-form>
</template>

<script>
import useStore from "../../store/store";
import {ElLoading, ElMessage} from "element-plus";

const store = useStore()
export default {
    name: "Professional_and_course_building_outcomes",
    data() {
        return {
            Professional_and_course_building_outcomes: {
                user_id: store.user_id,
                m_year_part1:"",                // 第一部分年份
                m_year_part2:"",                // 第二部分年份
                m_year_part3:"",                // 第三部分年份
                m_year_part4:"",                // 第四部分年份
                m_coursemember_first: '',       // 一部分，上学期XXX课程负责人
                m_coursemember_second: '',      // 一部分，下学期XXX课程负责人
                m_coursetask1: '',              // 一部分，上学期主要承担任务
                m_coursetask2: '',              // 一部分，下学期主要承担任务
                m_major_first: '',              // 二部分，上学期专业
                m_major_second: '',             // 二部分，下学期专业
                m_level_first: '',              // 二部分，上学期层次
                m_level_second: '',             // 二部分，下学期层次
                m_traintask1: '',               // 二部分，上学期主要承担任务
                m_traintask2: '',               // 二部分，下学期主要承担任务
                m_coursewrite_first: '',        // 三部分，上学期课程标准编写
                m_coursewrite_second: '',       // 三部分，下学期课程标准编写
                m_write_task1: '',              // 三部分，上学期主要任务
                m_write_task2: '',              // 三部分，下学期主要任务
                m_class_first: '',              // 四部分，上学期教室
                m_class_second: '',             // 四部分，下学期教室
                m_classtask1: '',               // 四部分，上学期主要任务
                m_classtask2: '',               // 四部分，下学期主要任务
                m_others: '',                   // 其他
            },
            rules: {
                m_year_part1: [
                    {required: true, message: '请输入-课程团队相关工作-年份', trigger: 'blur'}
                ],
                m_year_part2: [
                    {required: true, message: '请输入-人才培养方案修订-年份', trigger: 'blur'}
                ],
                m_year_part3: [
                    {required: true, message: '请输入-课程标准编写-年份', trigger: 'blur'}
                ],
                m_year_part4: [
                    {required: true, message: '请输入-参与实训室管理-年份', trigger: 'blur'}
                ],
                m_coursemember_first: [
                    {required: true, message: '请输入-课程团队相关工作-上半年作为课程负责人/课程团队成员，所承担的课程名称', trigger: 'blur'}
                ],
                m_coursemember_second: [
                    {required: true, message: '请输入-课程团队相关工作-下半年作为课程负责人/课程团队成员，所承担的课程名称', trigger: 'blur'}
                ],
                m_coursetask1: [
                    {required: true, message: '请输入-课程团队相关工作-上半年主要承担任务', trigger: 'blur'}
                ],
                m_coursetask2: [
                    {required: true, message: '请输入-课程团队相关工作-下半年主要承担任务', trigger: 'blur'}
                ],
                m_major_first: [
                    {required: true, message: '请输入-人才培养方案修订-上半年专业', trigger: 'blur'}
                ],
                m_major_second: [
                    {required: true, message: '请输入-人才培养方案修订-下半年专业', trigger: 'blur'}
                ],
                m_level_first: [
                    {required: true, message: '请输入-人才培养方案修订-上半年层次', trigger: 'blur'}
                ],
                m_level_second: [
                    {required: true, message: '请输入-人才培养方案修订-下半年层次', trigger: 'blur'}
                ],
                m_traintask1: [
                    {required: true, message: '请输入-人才培养方案修订-上半年主要承担任务', trigger: 'blur'}
                ],
                m_traintask2: [
                    {required: true, message: '请输入-人才培养方案修订-下半年主要承担任务', trigger: 'blur'}
                ],
                m_coursewrite_first: [
                    {required: true, message: '请输入-课程标准编写-上半年课程标准编写', trigger: 'blur'}
                ],
                m_coursewrite_second: [
                    {required: true, message: '请输入-课程标准编写-下半年课程标准编写', trigger: 'blur'}
                ],
                m_write_task1: [
                    {required: true, message: '请输入-课程标准编写-上半年主要承担任务', trigger: 'blur'}
                ],
                m_write_task2: [
                    {required: true, message: '请输入-课程标准编写-下半年主要承担任务', trigger: 'blur'}
                ],
                m_class_first: [
                    {required: true, message: '请输入-参与实训室管理-上班年管理教室', trigger: 'blur'}
                ],
                m_class_second: [
                    {required: true, message: '请输入-参与实训室管理-下班年管理教室', trigger: 'blur'}
                ],
                m_classtask1: [
                    {required: true, message: '请输入-参与实训室管理-上半年主要承担任务', trigger: 'blur'}
                ],
                m_classtask2: [
                    {required: true, message: '请输入-参与实训室管理-下半年主要承担任务', trigger: 'blur'}
                ]
            },
            isLoading: false,
            ActiveTab: '课程团队相关工作'
        }
    },
    methods: {
        submit() {
            this.$refs.Professional_and_course_building_outcomes_form.validate((validate, message) => {
                if (!validate) {
                    this.ActiveTab = message[Object.keys(message)[0]][0].message.split('-')[1]
                    ElMessage.error(`表单验证未通过-> ${message[Object.keys(message)[0]][0].message}`)
                    return false
                }
                this.push()
            })
        },
        push() {
            this.Professional_and_course_building_outcomes.type = "4002"
            this.isLoading = true
            this.Professional_and_course_building_outcomes.user_id = store.user_id
            this.$api.pushMajorCourseData(this.Professional_and_course_building_outcomes).then(
                response => {
                    if (response.data.isSaved === true) {
                        ElMessage.success({
                            message: '专业和课程建设成果提交成功！'
                        })
                    } else {
                        ElMessage.error({
                            message: '提交失败'
                        })
                    }
                    this.isLoading = false
                },
                error => {
                    console.log(error)
                    ElMessage.error({
                        message: error.message
                    })
                    this.isLoading = false
                }
            )
        }
    },
    mounted() {
        const loading = ElLoading.service({
            target: document.querySelector('.el-main'),
            text: '请稍候...'
        })
        this.$api.pullMajorCourseData(store.user_id).then(
            response => {
                this.Professional_and_course_building_outcomes = response.data
                loading.close()
            },
            error => {
                console.log(error)
                ElMessage.error(`${error.message}----请求数据失败，请手动输入`)
                loading.close()
            }
        )
    }
}
</script>

<style scoped>

</style>